<template>
	<view class="page">
		<status-bar :title="title"></status-bar>
		<backTop v-if='toTop'></backTop>
		<view class="top-box" v-if='pageData.detail'>
			<image class="act-img" @load='loaded=true' @error='loaded=true' :src="imgUrl + pageData.detail.photo" mode="widthFix"></image>
			<view class="act-msg">
				<view v-if="pageData.detail.enable_timer == 1">
				<view class="flex-box align-center time-box" v-if='pageData.detail.start_time || pageData.detail.end_time'>
					<template v-if='parseInt(pageData.detail.start_time) - seconds < 0'>
						<count-down txtColor='#EC3D00' bg='#EC3D00' startTxt='距结束' endTxt='本场' fontSize='30' :time="parseInt(pageData.detail.end_time) - seconds"></count-down>
					</template>
					<template v-if='parseInt(pageData.detail.start_time) - seconds >= 0'>
						<count-down txtColor='#EC3D00' bg='#EC3D00' startTxt='距开始' endTxt='本场' fontSize='30' :time="parseInt(pageData.detail.start_time) - seconds"></count-down>
					</template>
				</view>
				</view>
				<view class="titleColor" v-else>活动进行中</view>
				<view class="people-box flex-box align-center flex-between">
					
					<view class="text-box">
						<text>{{ pageData.detail.show_browse }}</text>
						<text>人正在看</text>
					</view>
					<view class="people flex-box" v-if='pageData.detail.v_headimg'>
						<block v-for="(per,j) in pageData.detail.v_headimg" :key='j'>
							<image :src="per" mode="aspectFill"></image>
						</block>
					</view>
				</view>
				<view class="bar-box">
					<view class="bar">
						<view v-if='pageData.detail.sale' :style="{
							width: (parseInt(pageData.detail.sale)/parseInt(pageData.detail.original_stock)*100).toFixed(0)+'%'
						}"></view>
					</view>
					<view class="num-list flex-box">
						<view class="more-box">已抢{{ pageData.detail.sale?pageData.detail.sale:0 }}件</view>
						<text>{{ (parseInt(pageData.detail.original_stock)/3).toFixed(0) }}</text>
						<text>{{ (parseInt(pageData.detail.original_stock)*2/3).toFixed(0) }}</text>
						<text>{{ pageData.detail.original_stock }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if='loaded'>
			<view class="flex-box cls-box flex-between">
				<view class="list flex-box" :class="{show: showMore}" v-if='pageData.goods_list.length > 1'>
					<view class="item" :class="{active: currentTab == i}" @click="currentTab=i" v-for="(item,i) in pageData.goods_list" :key='i'>{{ item.classify_name }}</view>
				</view>
				<text class="iconfont icon-xiangxia" v-if='pageData.goods_list.length > 4' :class="{rotate: showMore}" @click="showMore = !showMore"></text>
			</view>
			<view class="goods-box" v-if='pageData.goods_list && pageData.goods_list.length > 0'>
				<view class="list">
					<view class="item flex-box" v-for="(item,i) in pageData.goods_list[currentTab].goods" :key='i' @click="toGoods(item.goods_id)">
						<image :src="imgUrl + item.img" mode="aspectFill" class="goods_img"></image>
						<view class="goods_msg flex">
							<view class="name lines">{{ item.name }}</view>
							<view class="flex-box align-center">
								<view class="saled">
									<view :style="{width: 100 - parseFloat(item.stock_percent)+'%'}"></view>
									<text>{{ 100 - parseFloat(item.stock_percent) }}%</text>
								</view>
								<text class="saled-txt">已抢{{ parseInt(item.original_stock) - parseInt(item.stock) }}{{item.unit?item.unit:'件'}}</text>
							</view>
							<view class="flex-box align-center coupon-box">
								<text class="price">{{ item.price }}</text>
								<view class="coupon flex-box align-center">
									<text>{{ item.price_description }}</text>
								</view>
							</view>
							<view class="flex-box flex-between btn-box">
								<!-- <text class="lines" v-if='pageData.detail.activity_price_name'>{{ pageData.detail.activity_price_name }}</text> -->
								<view class="flex"></view>
								<view class="btn flex-box align-center flex-center">
									<text>{{ item.price_name?item.price_name:'立即购买' }}</text>
									<text class="iconfont icon-xiangyouxiayiye"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="DiLine" v-if='pageData.goods_list.length > 8'>- - 人家是有底线得 - -</view>
			</view>
			<empty type='1' cat='2' v-if='noData' pad='20' msg='没有找到活动商品哟 ~'></empty>
		</view>
		<view v-if='errMsg' class="DiLine">
			<empty type='1' cat='2' pad='20' :msg='errMsg'></empty>
		</view>
	</view>
</template>

<script>
	let that,seconds = new Date().getTime()/1000;
	var _setInterval = null
	export default {
		data() {
			return {
				staticUrl: this.staticUrl,
				imgUrl: this.imgUrl,
				toTop: false,
				pageData:'',
				noData: false,
				title:'',
				seconds: seconds,
				errMsg:'',
				showMore: false,
				currentTab: 0,
				loaded: false
			}
		},
		onLoad(e) {
			that = this;
			if(e.act_id){
				that.act_id = e.act_id;
				this.getPageData()
			}else{
				that.errMsg = '参数获取失败！！！'
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 250) {
				this.toTop = true;
			} else {
				this.toTop = false
			}
		},
		methods: {
			getPageData(){
				that.noData = false
				this.$http.post({
					url: '/singleSaleApi/groupKillDetail',
					data: {
						bid: uni.getStorageSync('bid'),
						act_id: that.act_id
					}
				}).then(res => {
					if(res.code == 100 && res.data){
						that.title = res.data.detail.name
						uni.setNavigationBarTitle({
							title: res.data.detail.name
						})
						that.pageData = res.data
						if(!that.pageData.goods_list || that.pageData.goods_list.length < 1){
							that.noData = true
						}
					}else{
						that.errMsg = res.msg
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		.top-box{
			position: relative;
			.act-img{
				width: 100%;
			}
			.act-msg{
				position: absolute;
				left: 20rpx;
				bottom: 38rpx;
				width: calc(100% - 40rpx);
				background-color: #FFFFFF;
				z-index: 1;
				border-radius: 16rpx;
				padding: 24rpx 20rpx;
				.time-box{
					margin-bottom: 24rpx;
				}
			
				.people-box{
					// padding: 0 20rpx 0 0;
					.people{
						padding-left: 8rpx;
						image{
							width: 46rpx;
							height: 46rpx;
							border-radius: 50%;
							margin-left: 8rpx;
						}
					}
					.text-box{
						// padding-left: 14rpx;
						text{
							&:nth-child(1){
								color: #EC3D00;
							}
							&:nth-child(2){
								color: #333333;
							}
						}
					}
				}
				.more-box{
					font-size: 24rpx;
					color: #CF3C36;
					font-weight: bold;
				}
			
				.bar-box{
					margin-top: 12rpx;
					.bar{
						height: 26rpx;
						border-radius: 26rpx;
						background-color: #F5F5F5;
						view{
							width: 0;
							transition: all 0.2s;
							height: 26rpx;
							border-radius: 26rpx;
							background: linear-gradient(225deg, #FF9341 0%, #FE2C00 100%);
						}
					}
					.num-list{
						text{
							flex: 1;
							text-align: right;
							color: #999999;
						}
					}
				}
			}
		}
		
		.content{
			background-color: #FFFFFF;
			position: relative;
			top: -18rpx;
			border-radius: 16rpx 16rpx 0 0;
			z-index: 1;
			.cls-box{
				.list{
					flex-wrap: wrap;
					height: 62rpx;
					overflow: hidden;
					padding-top: 24rpx;
					&.show{
						height: auto;
					}
					.item{
						padding: 0 0 12rpx 24rpx;
						color: #666666;
						font-size: 26rpx;
						&.active{
							color: #333333;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
				.icon-xiangxia{
					font-size: 30rpx;
					color: #D8D8D8;
					height: 60rpx;
					padding: 30rpx 30rpx 0 24rpx;
					transition: all 0.2s;
					&.rotate{
						transform: rotate(180deg);
					}
				}
			}
			.goods-box{
				.list{
					padding: 30rpx;
					.item{
						margin-bottom: 30rpx;
						.goods_img{
							width: 190rpx;
							height: 190rpx;
							border-radius: 16rpx;
						}
						.goods_msg{
							width: calc(100% - 190rpx);
							padding-left: 20rpx;
							.name{
								font-size: 30rpx;
								color: #333333;
								font-weight: bold;
								margin-bottom: 12rpx;
							}
							.saled{
								width: 204rpx;
								height: 26rpx;
								background-color: #F5F5F5;
								border-radius: 26rpx;
								margin-right: 14rpx;
								position: relative;
								text{
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%,-50%);
									color: #FE2C00;
								}
								view{
									height: 100%;
									border-radius: 26rpx;
									background: linear-gradient(225deg, #FF9341 0%, #FE2C00 100%);
								}
							}
							
							.saled-txt{
								color: #666666;
								font-size: 26rpx;
							}
							.coupon-box{
								margin-top: 6rpx;
								.coupon{
									margin-left: 6rpx;
									image{
										height: 26rpx;
										width: 20rpx;
										margin-right: 2rpx;
									}
									text{
										color: #FF6539;
										line-height: 26rpx;
										font-size: 24rpx;
									}
								}
								.price{
									font-size: 38rpx;
									font-weight: bold;
									color: #FF3900;
								}
							}
							.btn-box{
								align-items: flex-end;
								>text{
									color: #999999;
									font-size: 22rpx;
									position: relative;
									margin-bottom: 6rpx;
								}
								.btn{
									min-width: 156rpx;
									padding: 0 10rpx 0 16rpx;
									height: 52rpx;
									border-radius: 52rpx;
									background: #FF3900 linear-gradient(191deg, #FF9240 0%, rgba(255, 255, 255, 0) 100%);
									box-shadow: 0px 0px 8rpx 0px rgba(255, 57, 0, 0.3);
									border-radius: 28rpx;
									text{
										color: white;
									}
									.iconfont{
										font-size: 24rpx;
										margin-left: 6rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	
		.titleColor{
			color:#FF3900;
			font-size:32rpx;
			font-weight:bold;
			margin-bottom:20rpx;
		}
	}
</style>
